<template>
  <div class="index-relation">
    <div class="relation-data-title">
      <div>{{ data.subject }}</div>
    </div>
    <div class="show-search">
      <a-input class="input-setting" v-model="searchKeyword" @change="changeSearch" />
      <a-button v-if="showSearchBtn" class="button-setting" type="primary" @click="searchClickFunc()">
        {{ $i18n('common.search.label') }}
      </a-button>
    </div>
  </div>
</template>

<script>
  /*global openCtpWindow _ctxPath*/
  import mixins from '../mixins';
  export default {
    name: 'IndexRelation',
    mixins: [mixins],
    data() {
      return {
        searchKeyword: '',
        showSearchBtn: false
      };
    },
    created() {
      //添加查询
      if (this.data.fieldNameList && this.data.fieldNameList.length){
        this.data.customCondItemList = this.data.fieldNameList.map(fieldName => {
          let cItem = {};
          cItem.fieldName = fieldName;
          cItem.trunkFieldName = fieldName;
          return cItem;
        });
      }
      this.showSearchBtn = $.ctx.hasPlugin("index") 
    },
    watch: {
      'list.key'(newV) {
        this.searchKeyword = newV;
      }
    },
    methods: {
      changeSearch(e) {
        this.searchKeyword = e.target.value;
      },
      searchClickFunc() {
        let keyword = this.searchKeyword;

        //原逻辑 避免get方式超长,截取100个字符
        keyword = keyword.substring(0, 100);
        const keywordUrl =
          _ctxPath +
          '/index/indexController.do?method=openRedirect&open_type=href_blank&keyword=' +
          encodeURIComponent(encodeURIComponent(keyword));

        openCtpWindow({ url: keywordUrl });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .index-relation {
    .show-search {
      display: flex;
      padding: 5px;
      align-items: center;
      height: 50px;

      .input-setting {
        flex: 1;
      }

      .button-setting {
        margin-left: 10px;
      }
    }
  }
</style>
